* {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

/*为什么要将背景图片设置成body的背景，之前是设置成index这个div的，如果设置成div的背景图片那么在缩放浏览器时背景图片会随着div的缩小而缩小*/
body {
  /*这里在css设置背景图片，如果使用 img 标签进行设置的话，会遮盖掉其它元素*/
  /*背景1：https://z3.ax1x.com/2021/06/02/2MsfsS.jpg*/
  /*背景2：https://z3.ax1x.com/2021/06/02/2MxLpn.jpg*/
  /* background: url("https://z3.ax1x.com/2021/06/24/RQlql8.jpg") no-repeat center center fixed; */
  /* z-index: 1; */
  /*这个是保证背景图片不会被放大*/
  /*同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器*/
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #f9f9f9;
}

#index {
  display: block;
}

#search_div {
  margin: 0 auto;
  width: 937px;
  text-align: center;
}

#search_input {
  width: 600px;
  height: 40px;
  background-color: rgb(180,180,180,0.8);
  border: none;
  /*去除输入框聚焦时出现的外边框*/
  outline: none;
  cursor: text;
  /* border-radius: 40px; */
  text-align: center;
  font-size: 20px;
  font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue",
    Calibri, Helvetica, Arial, sans-serif;
  color: black;
}

@keyframes si {
  from {
  }
  to {
    -webkit-box-shadow: 5px 4px 5px #262626;
    -moz-box-shadow: 5px 4px 5px #262626;
    box-shadow: -1px 4px 5px #262626;
  }
}

.mask_layer {
  /*这个是保证背景图片不会被放大缩小*/
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.25); */
  /* z-index: 3; */
}

#time_div {
  margin-top: 14%;
  /* z-index: 4; */
  text-align: center;
  margin-bottom: 10px;
}

#hours_span,
#minute_span,
#second_span {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 40px;
  color: #000000;
  animation-delay: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  cursor: pointer;
}

@keyframes hms {
  from {
    color: rgba(0, 0, 0, 0);
  }
  to {
    color: rgba(0, 0, 0, 1);
  }
}

#key_word_show {
  margin: 20px auto;
  width: 580px;
  /* background-color: rgba(50, 50, 50, 0.7); */
  border-radius: 10px;
  position: absolute;
  z-index: 8;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  left: 620px;
  margin-top: 4px;
  padding-bottom: 6px;
}

/**
   关键字检索列表展开开始动画
 */
@keyframes kws {
  from {
    height: 0px;
  }
  to {
    height: 365px;
  }
}

/**
     关键字检索列表展开结束动画
   */
@keyframes kws2 {
  from {
    height: 365px;
  }
  to {
    height: 0px;
  }
}

#key_word_show ul {
  cursor: pointer;
  padding-top: 8px;
  padding-bottom: 8px;
}

#key_word_show ul li {
  color: black;
  line-height: 34px;
  /* animation-duration: 0.4s; */
  animation-fill-mode: forwards;
  list-style: none;
  font-size: 18px;
  cursor: pointer;
  background-color: white;
  cursor: pointer;
}

@keyframes kwsl {
  from {
  }
  to {
    /* background-color: gray; */
    /* border-radius: 10px; */
    background-color: rgb(160, 160, 160);
  }
}

@keyframes kwsl2 {
  from {
    /* background-color: gray; */
    /* border-radius: 10px; */
    background-color: rgba(160, 160, 160);
  }
  to {
  }
}

.search_input_div {
  position: relative;
}

#navigation_icon {
  position: absolute;
  left: 0;
  background-image: url("https://z3.ax1x.com/2021/06/21/RE58oV.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 35px;
  height: 35px;
  background-size: 35px 35px;
  margin-left: 190px;
  margin-top: 4px;
  cursor: pointer;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#week_span {
  margin: 0px auto;
  width: 80px;
  height: 20px;
  display: block;
  font-size: 10px;
  color: rgba(245, 245, 245, 0);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  animation-fill-mode: forwards;
  animation-delay: 0.8s;
  animation-duration: 0.5s;
}

@keyframes ws {
  from {
    color: rgba(245, 245, 245, 0);
  }
  to {
    color: rgba(245, 245, 245, 1);
  }
}

#navigation_words {
  list-style: none;
  margin-top: 5px;
  font-size: 10px;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-name: nw;
}

@keyframes nw {
  0% {
    color: rgba(185, 193, 185, 1);
  }
  10% {
    color: rgba(185, 193, 185, 0.9);
  }
  20% {
    color: rgba(185, 193, 185, 0.8);
  }
  30% {
    color: rgba(185, 193, 185, 0.7);
  }
  40% {
    color: rgba(185, 193, 185, 0.6);
  }
  50% {
    color: rgba(185, 193, 185, 0.5);
  }
  60% {
    color: rgba(185, 193, 185, 0.4);
  }
  70% {
    color: rgba(185, 193, 185, 0.3);
  }
  80% {
    color: rgba(185, 193, 185, 0.2);
  }
  90% {
    color: rgba(185, 193, 185, 0.1);
  }
  100% {
    color: rgba(185, 193, 185, 0);
  }
}

@keyframes nw2 {
  0% {
    color: rgba(185, 193, 185, 0);
  }
  10% {
    color: rgba(185, 193, 185, 0.1);
  }
  20% {
    color: rgba(185, 193, 185, 0.2);
  }
  30% {
    color: rgba(185, 193, 185, 0.3);
  }
  40% {
    color: rgba(185, 193, 185, 0.4);
  }
  50% {
    color: rgba(185, 193, 185, 0.5);
  }
  60% {
    color: rgba(185, 193, 185, 0.6);
  }
  70% {
    color: rgba(190, 190, 190, 0.7);
  }
  80% {
    color: rgba(200, 200, 200, 0.8);
  }
  90% {
    color: rgba(220, 220, 220, 0.9);
  }
  100% {
    color: rgba(220, 220, 220, 1);
  }
}

#menu_div {
  position: absolute;
  width: 400px;
  height: 500px;
  background-color: rgba(10, 10, 10, 0.6);
  /* z-index: 4; */
  bottom: 0px;
  right: 0px;
  margin-right: -405px;
  margin-bottom: 5px;
  border-radius: 10px;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

@keyframes md {
  from {
    margin-right: -405px;
  }
  to {
    margin-right: 5px;
  }
}

@keyframes md2 {
  from {
    margin-right: -5px;
  }
  to {
    margin-right: -405px;
  }
}

#menu_title_div {
  width: 100%;
  height: 35px;
  text-align: center;
  background: rgba(50, 50, 50, 1);
  /*实现毛玻璃效果*/
  /*filter:blur(20px);*/
  /*-webkit-filter:blur(20px);*/
  /*-moz-filter:blur(20px);*/
  /*-ms-filter:blur(20px);*/
  /*-o-filter:blur(20px);*/
}

#menu_title_div span {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  color: #dedede;
  font-weight: bold;
}

#title_div {
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  /*
    https://z3.ax1x.com/2021/06/22/RZ1uD0.png
    https://z3.ax1x.com/2021/06/22/RZ33eP.png
    https://z3.ax1x.com/2021/06/22/RZ8atO.png
    菜单图标
    */
  /*background-image: url("https://z3.ax1x.com/2021/06/22/RZ8atO.png");*/
  background-size: 20px 20px;
  cursor: pointer;
}

#close_div {
  width: 20px;
  height: 20px;
  float: right;
  margin-right: 10px;
  margin-top: 8px;
  background-image: url("https://z3.ax1x.com/2021/06/22/RZGiE6.png");
  background-size: 20px 20px;
  cursor: pointer;
}

#menu_navigation_div {
  position: absolute;
  width: 100%;
  height: 40px;
  text-align: center;
  background: rgba(50, 50, 50, 1);
  bottom: 0px;
}

#menu_navigation_div button {
  width: 90px;
  height: 35px;
  display: inline-block;
  float: left;
  text-align: center;
  border: none;
  background-color: rgba(10, 10, 10, 0);
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.3s ease 0s;
}

#menu_navigation_div :not(:first-child, :last-child) {
  margin-left: 15px;
}

#menu_navigation_div button img {
  width: 22px;
  height: 22px;
  margin-top: 5px;
}

#menu_show_div {
  position: absolute;
  width: 500px;
  height: 430px;
  top: 35px;
}

#menu_show_iframe {
  width: 100%;
  height: 100%;
  border: none;
  animation-duration: 0.5s;
}

/* 显示网站收藏 */

.net_div {
  width: 390px;
  height: auto;
}
.net_show_div {
  display: inline-block;
  text-align: center;
  width: 120px;
  height: 72px;
  border-radius: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-left: 18px;
  margin-bottom: 6px;
  background-color: white;
  cursor: pointer;
}
.item_layer {
  float: left;
  position: absolute;
  width: 60px;
  height: 65px;
  margin-top: -5px;
  border-radius: 10px;
  background-color: rgba(10, 10, 10, 0.2);
}
.item_layer:hover {
  background-color: rgba(80, 80, 80, 0.5);
}
.net_url {
  margin: 0px auto;
  width: 100%;
  height: 25px;
  overflow: hidden;
  text-align: center;
}
.net_show_div img {
  cursor: pointer;
  width: 48px;
  height: 48px;
  transform: scale(0.7);
  transition: transform 0.4s ease 0s;
}
.net_show_div img:hover {
  transform: scale(1);
}
.net_show_div a {
  color: black;
  text-decoration: none;
  font-size: 10px;
}
.net_add_div {
  display: inline-block;
  width: 60px;
  height: 55px;
  border: 1px solid #4b4b48;
  border-radius: 10px;
  cursor: pointer;
  padding-top: 5px;
  margin-left: 8px;
  background: url("https://z3.ax1x.com/2021/06/23/RnRaM4.png") no-repeat center
    center rgba(10, 10, 10, 0.5);
  background-size: 50px 50px;
}
